<!-- todoapp -->
<section class="todoapp">
  <header class="header">
    <h1>{{ title }}</h1>
    <input class="new-todo" type="text" [(ngModel)]="todo" (keyup.enter)="addTodo()" autofocus autocomplete="off" placeholder="What needs to be done?"  />
  </header>
  <section class="main">
    <input id="toggle-all" [(ngModel)]="allChecked"  class="toggle-all" type="checkbox"  />
    <label for="toggle-all">Mark all as complete</label>
    <ul class="todo-list">
      <li class="todo" *ngFor="let todo of todos"
        [class.completed]="todo.completed"
        [class.editing]="todo === editingTodo"
        >
        <div class="view">
          <input class="toggle" [(ngModel)]="todo.completed" type="checkbox"  />
          <label (dblclick)="editTodo(todo)">{{ todo.title}}</label>
          <button class="destroy" (click)="removeTodo(todo)"></button>
        </div>
        <input [(ngModel)]="todo.title" (keyup.enter)="doneEdit(todo)" (blur)="doneEdit(todo)" class="edit" type="text" />
      </li>
    </ul>
  </section>
  <footer class="footer" [hidden]="!todos.length">
    <span class="todo-count">
      <strong>{{ remainingTodoCount }}</strong>
      item left
    </span>
    <!-- <ul class="filters">
      <li>
        <a href="#/all">All</a>
      </li>
      <li>
        <a href="#/active">Active</a>
      </li>
      <li>
        <a href="#/completed">Completed</a>
      </li>
    </ul> -->
    <button class="clear-completed" (click)="clearCompleted()">Clear completed</button>
  </footer>
</section>